iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
0
Modern Web

JS煉金術:Javascript30+聲光玩轉的Drum Pads系列 第 25

[JS30] DAY24 : Sticky Nav

  • 分享至 

  • xImage
  •  

[程式碼&DEMO] [HackMD完整筆記]

目標


做出當scroll超過Nav時,把Nav固定在上方的效果。

步驟流程


**STEP1 **

 const nav = document.querySelector('#main'); //選取nav
  const topOfNav = nav.offsetTop; // 設定nav到window的距離

  function fixNav(){
    console.log(topOfNav, window.scrollY);
  }
  window.addEventListener('scroll', fixNav); //綁定事件scroll

上一篇
[JS30] DAY23 : Speech Synthesis
下一篇
[JS30]DAY25 : Event Capture, Propagation, Bubbling and Once
系列文
JS煉金術:Javascript30+聲光玩轉的Drum Pads30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言